<template>
    <div>
        <a-popover placement="bottom">
            <template #content>
                <p>
                    <span class="title">账号昵称:</span>
                    <span class="value">{{ store.data.username }}</span>
                </p>
                <p>
                    <span class="title">角色:</span>
                    <span class="value" v-if="store.data.role == 0" style="color: red;">超级管理员</span>
                    <span class="value" v-if="store.data.role == 1" style="color: green;">初级管理员</span>
                </p>
                <a-popconfirm placement="top" ok-text="退出" cancel-text="取消" @confirm="confirm">
                    <template #title>
                        真的要退出登录吗？
                    </template>
                    <a-button type="primary" danger style="margin-left: 30px;">退出</a-button>
                </a-popconfirm>
            </template>
            <template #title>
                <span>账号信息</span>
            </template>
            <a-avatar :style="{ backgroundColor: share.color, marginRight: '100px' }">
                <template #icon>
                    <UserOutlined />
                </template>
            </a-avatar>
        </a-popover>
    </div>
</template>

<script setup>
import { UserOutlined } from '@ant-design/icons-vue';
import share from '../../util/commnet'
import { useUserData } from '../../stores/userData';
import { useRouter } from 'vue-router';
const store = useUserData(); 
const router = useRouter();
const confirm = ()=>{
    store.data = {};
    router.replace({name:'login'})
}
</script>

<style lang="scss">
p {
    margin-bottom: 10px;

    .title {
        font-size: 14px;
        color: #333;
    }

    .value {
        font-size: 13px;
        color: #666;
        margin-left: 5px;
    }
}
</style>